<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myfunc()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<div onmouseover="mover(this)" onmouseout="mout(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
    把鼠标移到上面</div><br>
<script>
    function myfunc() {
        var x=document.getElementById("fname");
        x.value=x.value.toUpperCase();
    }
    function mover(obj) {
        obj.innerHTML="真听话";
    }
    function mout(obj) {
        obj.innerHTML="把鼠标移上来啊";
    }
</script>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
    function mDown(obj)
    {
        obj.style.backgroundColor="#1ec5e5";
        obj.innerHTML="请释放鼠标按钮"
    }

    function mUp(obj)
    {
        obj.style.backgroundColor="green";
        obj.innerHTML="请按下鼠标按钮"
    }
</script>

</body>
</html>